<template>
  <div class="personalCenter">
    <div class="myList">
      <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title" @click="oauthClick">支付宝授权</span>
          <!-- <img class="custom-img" src="../../assets/img/zhi.jpeg" alt="" /> -->
          <van-icon name="alipay" :color="alipayColor" />
        </template>
      </van-cell>

      <van-cell title="修改密码" is-link @click="updataPassword" />
      <van-cell title="退出登录" is-link @click="logout" />
    </div>

    <van-dialog
      v-model="show"
      title="修改密码"
      show-cancel-button
      @confirm="surePassword"
      @cancel="cancelPassword"
    >
      <div class="updatePassword">
        <van-field
          v-model="password"
          type="password"
          placeholder="请输入密码"
        />
        <van-field
          type="password"
          v-model="password2"
          placeholder="请再次输入密码"
        />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
import { Image as VanImage } from "vant";
import { Notify } from "vant";

import { Field } from "vant";

Vue.use(Field);
import {
  ALIYUN_APP_ID,
  ALIYUN_REDIRECT_URL,
  ALIYUN_AUTH
} from "@/utils/constant";

Vue.use(VanImage);
Vue.use(Dialog);
import apiMar from "@/api/api";
export default {
  components: {},
  data() {
    return {
      show: false,
      password: "",
      password2: "",
      alipayColor: "#666"
    };
  },
  computed: {},
  watch: {},
  methods: {
    oauthClick() {
      console.log("1111");
      let params = {};
      apiMar
        .zpay(params)
        .then(res => {
          console.log("s222");

          window.location.href = res;
        })
        .catch(err => {
          // this.$Message.error(err)
        });
      // if (JSON.parse(this.$tool.getlocalStorage("userInfo")).is_ali_auth) {
      //   console.log("oauth true");
      // } else {
      //   console.log("oauth false");

      //   const Token = this.$tool.getlocalStorage("token");
      //   const redirect_uri = `${ALIYUN_REDIRECT_URL}?token=${Token}`;
      //   const oauth_uri = `${ALIYUN_AUTH}/oauth2/publicAppAuthorize.htm?app_id=${ALIYUN_APP_ID}&scope=auth_user&redirect_uri=${encodeURIComponent(
      //     redirect_uri
      //   )}`;
      //   const alipay_uri = `alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(
      //     oauth_uri
      //   )}`;
      //   window.location.href = `https://render.alipay.com/p/s/i/?scheme=${encodeURIComponent(
      //     alipay_uri
      //   )}`;
      // }
    },
    updataPassword() {
      this.show = true;
    },
    cancelPassword() {
      this.password = "";
      this.password2 = "";
    },

    surePassword() {
      if (!this.password) {
        Notify({ type: "warning", message: "密码不能为空。" });
        return false;
      }
      if (this.password !== this.password2) {
        Notify({ type: "warning", message: "密码请保持一致。" });
        return false;
      }
      let params = {
        password: this.password
      };
      apiMar
        .updatePassword(params)
        .then(res => {
          Notify({ type: "success", message: "修改成功。" });
          this.cancelPassword();
        })
        .catch(err => {
          console.log(err, "err");
          Notify({ type: "warning", message: err.message });
        });
    },
    logout() {
      console.log(111);
      Dialog.confirm({
        title: "退出登录",
        message: "确认退出吗？"
      })
        .then(() => {
          this.$tool.clearlocalStorage("token");
          this.$router.push({
            path: "/login"
          });

          //   apiMar
          //     .logout()
          //     .then(res => {
          //       console.log(222);
          //       this.$tool.clearlocalStorage('token')
          //       this.$router.push({
          //         path: '/login'
          //       })

          //     })
          //     .catch(err => {
          //       Notify({ type: "warning", message: err.message });
          //     });
        })
        .catch(() => {
          console.log(222223);
        });
    }
  },
  created() {
    let userInfo = JSON.parse(this.$tool.getlocalStorage("userInfo"));
    if (userInfo.is_ali_auth) {
      this.alipayColor = "#1677ff";
    } else {
      this.alipayColor = "#666";
    }
  },

  mounted() {}
};
</script>
<style lang="scss" scoped>
.personalCenter {
  width: 90%;
  margin: 0 auto;

  .myOrder {
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 8px rgba(184, 182, 182, 0.22);
    border-radius: 6px;

    .myTit {
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px solid #ebedf0;
      height: 45px;
      line-height: 45px;
      padding-left: 16px;
    }

    .dingBox {
      margin-top: 16px;
      padding-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      .ding {
        width: 25%;

        img {
          display: block;
          width: 30px;
          height: 30px;
          margin: 0 auto;
        }

        span {
          display: block;
          font-size: 14px;
          line-height: 2;
          text-align: center;
          color: #333;
        }
      }
    }
  }

  .myList {
    // padding:15px 0;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 8px rgba(184, 182, 182, 0.22);
    border-radius: 6px;
  }

  .intro {
    padding: 15px;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 8px rgba(184, 182, 182, 0.22);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .portraitImg {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;

      img {
        display: block;
        width: 100%;
        border-radius: 50%;
      }
    }

    .desc {
      padding-left: 10px;
      flex: 1;

      .p1 {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        line-height: 1.4;
      }

      .p2 {
        font-size: 13px;
        color: #999;
        line-height: 1.4;
      }
    }
  }
}

.updatePassword {
  padding: 20px 0;
}

.custom-img {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: -4px;
}
</style>
